<!DOCTYPE html>
<html>
<head>
	<title>Tab Panels</title>
	<!-- -->
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<!-- -->
	<script src="../../../../enyo/enyo.js" type="text/javascript"></script>
	<script src="../../../../lib/onyx/package.js" type="text/javascript"></script>
	<script src="../../../../lib/layout/package.js" type="text/javascript"></script>
	<script src="../../source/wip-package.js" type="text/javascript"></script>
	<!-- -->
	<style>
		.panel {
			border: 6px solid orange;
			background: lightblue;
			font-size: 50px;
			text-align: center;
			padding: 10px;
		}
	</style>
</head>
<body>
	<script>
		enyo.kind({
			name: "App",
			kind: "FittableRows",
			components: [
				{kind: "onyx.Toolbar", components: [
					{kind: "onyx.Button", content: "Add", ontap: "addPanel"},
					{kind: "onyx.Button", content: "Delete", ontap: "deletePanel"}
				]},
				{kind: "TabPanels", arrangerKind: "CardSlideInArranger", fit: true, index: 3, components: [
					{content: "0", classes: "panel", caption: "Tab 0"},
					{kind: "TabPanels", classes: "panel", index: 1, style: "background: red;", caption: "Tab 1 >", components: [
						{content: "1.0", classes: "panel", style: "background: beige;",caption: "Tab 1.0"},
						{content: "1.1", classes: "panel", style: "background: #666;",caption: "Tab 1.1"},
						{content: "1.2", classes: "panel", style: "background: magenta;",caption: "Tab 1.2"},
						{content: "1.3", classes: "panel", style: "background: silver;",caption: "Tab 1.3"},
						{content: "1.4", classes: "panel", style: "background: beige;",caption: "Tab 1.4"},
						{content: "1.5", classes: "panel", style: "background: #666;",caption: "Tab 1.5"},
						{content: "1.6", classes: "panel", style: "background: magenta;",caption: "Tab 1.6"},
						{content: "1.7", classes: "panel", style: "background: silver;",caption: "Tab 1.7"},
						{content: "1.8", classes: "panel", style: "background: beige;",caption: "Tab 1.8"},
						{content: "1.9", classes: "panel", style: "background: #666;",caption: "Tab 1.9"},
						{content: "1.10", classes: "panel", style: "background: magenta;",caption: "Tab 1.10"},
						{content: "1.11", classes: "panel", style: "background: silver;",caption: "Tab 1.11"},
						{content: "1.12", classes: "panel", style: "background: magenta;",caption: "Tab 1.12"}
					]},
					{content: "2", classes: "panel", style: "background: beige;",caption: "Tab 2"},
					{content: "3", classes: "panel", style: "background: #666;",caption: "Tab 3"},
					{kind: "TabPanels", arrangerKind: "CardSlideInArranger", classes: "panel", index: 2, style: "background: red;", caption: "Tab 4 >", components: [
						{content: "4.0", classes: "panel", style: "background: beige;",caption: "Tab 4.0"},
						{content: "4.1", classes: "panel", style: "background: #666;",caption: "Tab 4.1"},
						{content: "4.2", classes: "panel", style: "background: magenta;",caption: "Tab 4.2"},
						{content: "4.3", classes: "panel", style: "background: silver;",caption: "Tab 4.3"}
					]},
					{content: "5", classes: "panel", style: "background: magenta;",caption: "Tab 5"},
					{content: "6", classes: "panel", style: "background: silver;",caption: "Tab 6"}
				]}
			],
			addPanel: function() {
				var t = this.$.tabPanels;
				var i = t.getPanels().length;
				var p = t.createComponent({classes: "panel", content: i});
				p.render();
				t.reflow();
				t.setIndex(i);
			},
			deletePanel: function() {
				this.$.tabPanels.getActive().destroy();
			}
		});
		new App({fit: true, classes: "onyx enyo-unselectable"}).write();
	</script>
</body>
</html>

